KI-Unterstützung beim Gestalten von Karteninhalten

Sofia Emelianova
Sofia Emelianova

Verwenden Sie das Steuerfeld KI-Unterstützung für das Styling, um das Gesamtlayout einer Website, bestimmte Elementstyles zu verstehen und KI-generierte Fehlerkorrekturen für CSS-Fehler zu erhalten.

Bereich „KI-Unterstützung“ öffnen

Der Bereich KI-Unterstützung wird in der Seitenleiste geöffnet.

Der Bereich „KI-Unterstützung“ wurde im Standardzustand geöffnet.

Über den Bereich „Elemente“

Wenn Sie die KI-Unterstützung über den Elementbereich öffnen möchten, klicken Sie beim Untersuchen eines DOM-Knotens mit der rechten Maustaste auf den Knoten und wählen Sie die Option KI fragen aus.

Das Kontextmenü des Elements mit der hervorgehobenen Option „KI fragen“.

Wenn Sie die KI-Unterstützung so öffnen, wird das geprüfte DOM-Element bereits als Kontextelement für die Unterhaltung ausgewählt.

Alternativ können Sie auf die schwebende Schaltfläche klicken, die mit einem angetippten DOM-Knoten verknüpft ist.

Die schwebende Schaltfläche, die an einen DOM-Knoten angehängt ist.

Über das Befehlsmenü

Wenn Sie die KI-Unterstützung über das Befehlsmenü öffnen möchten, geben Sie AI ein und führen Sie dann den Befehl KI-Unterstützung anzeigen aus, neben dem das Symbol Schublade angezeigt wird.

Das geöffnete Befehlsmenü mit der hervorgehobenen Option „KI-Unterstützung einblenden“.

Über das Menü „Weitere Tools“

Alternativ können Sie rechts oben auf Weitere Optionen > Weitere Tools > KI-Unterstützung klicken.

Das geöffnete Menü „Weitere Tools“.

Konversationskontext

Chats mit KI-Unterstützung beziehen sich immer auf das aktuell geprüfte Element, also das letzte Element, das im DOM-Baum des Elements-Bereichs ausgewählt wurde. Eine Referenz zu diesem Element wird links unten im Steuerfeld angezeigt.

Der Bereich für die KI-Unterstützung mit dem hervorgehobenen Kontextelement

Ändern Sie den Kontext über die Elementauswahl neben dem aktuellen Element oder über die DOM-Baumstruktur im Bereich „Elemente“.

Das derzeit geprüfte Element ist die Grundlage der Unterhaltung. Die KI-Unterstützung hat jedoch Zugriff auf alle Web-APIs, um weitere Informationen von der geprüften Seite zu erfassen. Dazu gehört auch das Abfragen anderer Elemente mit document.querySelector oder die Auswertung berechneter Stile.

Prompten

Wenn Sie eine neue Unterhaltung beginnen, bietet die KI-Unterstützung für das Styling Beispielvorschläge, mit denen Sie schnell loslegen können.

Der Bereich für die KI-Unterstützung mit hervorgehobenen Beispielprompts

Klicken Sie auf einen der Prompts, um das Eingabefeld für Prompts unten im Bereich vorab auszufüllen.

Alternativ können Sie einen eigenen Prompt oder eine eigene Frage in das Eingabefeld eingeben.

Wenn Sie einen Prompt senden möchten, drücken Sie entweder die Eingabetaste oder klicken Sie auf den Pfeil rechts neben dem Eingabefeld.

Konversationsablauf

Wenn Sie einen Prompt senden, wird die Unterhaltung mit dem Styling-Agenten gestartet. Um die Informationen zu erhalten, die für eine optimale Antwort auf Ihren Prompt erforderlich sind, generiert und führt der Bot JavaScript aus, das Web-APIs aufruft. Der Fortschritt des Kundenservicemitarbeiters wird in Schritten angezeigt. Der Status des ersten Schritts ist Investigating….

Das Panel für die KI-Unterstützung nach Beginn einer Unterhaltung.

Das Schrittlabel wird aktualisiert, wenn der Kundenservicemitarbeiter bestimmte Aktionen ausführt, um Ihre Frage zu beantworten.

Sobald der Kundenservicemitarbeiter zu einer endgültigen Antwort gekommen ist, wird diese unter den Schritten zur Fehlerbehebung angezeigt. Außerdem werden Vorschläge für weitere Schritte angezeigt.

Der Bereich „KI-Unterstützung“ mit einer Antwort von der KI

Klicken Sie auf eine der vorgeschlagenen Aufforderungen, um die Unterhaltung fortzusetzen. Klicken Sie auf das Dreipunkt-Menü .

eines Untersuchungsschritts, um besser zu verstehen, was die KI-Unterstützung im Hintergrund getan hat.

Der Bereich „KI-Unterstützung“ mit einem erweiterten Konversationsschritt.

Wenn du einen Fortschritts-Chip maximierst, siehst du den vom Kundenservicemitarbeiter ausgeführten Code zusammen mit dem Rückgabewert. Kopieren Sie den ausgeführten Code zur weiteren Verwendung, z. B. zur Ausführung über den Konsolenbereich.

Pausierte Unterhaltungen

Die KI-Unterstützung kann Code mit Nebenwirkungen generieren. In diesem Fall wird die Unterhaltung pausiert, bevor der Code ausgeführt wird.

Der Bereich „KI-Unterstützung“ mit einer pausierten Unterhaltung.

Wenn die Unterhaltung pausiert, sehen Sie sich den vom Kundenservicemitarbeiter vorgeschlagenen Code an. Klicken Sie auf und dann auf Continue (Weiter), um fortzufahren, oder auf Cancel (Abbrechen), um die Ausführung zu verhindern.

Änderungen am Arbeitsbereich speichern

Mit einem verbundenen Arbeitsbereichsordner können Sie Stiländerungen, die von der KI-Unterstützung vorgeschlagen werden, in den CSS-Quelldateien auf Ihrem Computer speichern.

Gehen Sie dazu so vor:

  1. Erstellen Sie zuerst eine Metadatendatei und verbinden Sie einen Arbeitsbereichsordner.

    Alternativ können Sie einen Ordner manuell hinzufügen.

  2. Starten Sie einen Chat über das Steuerfeld „Elemente“.

  3. Bitten Sie die KI-Unterstützung, Ihr CSS zu ändern.

  4. Die KI-Unterstützung kann Code generieren und die Ausführung pausieren. Prüfen Sie den Code und klicken Sie auf Weiter, um die Änderungen live zu testen.

  5. Maximieren Sie den Bereich Nicht gespeicherte Änderungen und klicken Sie auf Auf Arbeitsbereich anwenden.

  6. Überprüfen Sie die Änderungen in einem diff und klicken Sie auf Alle speichern.

Weitere Informationen zu diesem Workflow finden Sie unter:

Keine Antwort

Die KI-Unterstützung kann aus verschiedenen Gründen keine Antworten liefern.

Der Bereich „KI-Unterstützung“ mit einer abgelehnten Unterhaltung.

Wenn Sie der Meinung sind, dass Ihr Prompt ein Thema ist, über das die KI-Unterstützung sprechen sollte, melden Sie bitte einen Fehler.

Unterhaltungsverlauf

Sobald Sie eine Unterhaltung beginnen, basiert jede nächste Antwort auf Ihren bisherigen Interaktionen zwischen Ihnen und der KI.

Die KI-Unterstützung speichert Ihren Unterhaltungsverlauf zwischen den Sitzungen, sodass Sie auch nach dem Neuladen der Entwicklertools oder von Chrome auf Ihre bisherigen Chats zugreifen können.

Mit den Steuerelementen oben links im Bereich können Sie Ihren Konversationsverlauf verwalten.

Der Bereich „KI-Unterstützung“ mit hervorgehobenen Verlaufssteuerungen

Neu beginnen

Wenn Sie eine neue Unterhaltung mit dem aktuell ausgewählten Konversationskontext starten möchten, klicken Sie auf die Schaltfläche .

Weiter

Wenn Sie eine frühere Unterhaltung fortsetzen möchten, klicken Sie auf die Schaltfläche und wählen Sie sie im Kontextmenü aus.

Löschen

Wenn Sie eine Unterhaltung aus dem Verlauf löschen möchten, klicken Sie auf die Schaltfläche .

Antworten bewerten und Feedback geben

KI-Unterstützung ist eine experimentelle Funktion. Deshalb freuen wir uns über Ihr Feedback, damit wir die Qualität der Antworten und die Nutzerfreundlichkeit verbessern können.

Der Bereich „KI-Unterstützung“ mit hervorgehobenen Steuerelementen für die Altersfreigabe

Antworten bewerten

Bewerten Sie eine Antwort mit den Schaltflächen Mag ich und Mag ich nicht unter der Antwort.

Antworten melden

Wenn du unangemessene Inhalte melden möchtest, klicke neben den Schaltflächen zum Abstimmen auf die Schaltfläche .